<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>{$title} - {$_lang.title}</title>
<meta name="description" content="{if isset($description)}{$description}{else}{$_lang.desciption}{/if}" />
<link rel="stylesheet" href="/static/css/zui.min.css">
<link rel="stylesheet" href="/template/{$_lang.moban}/css/zui-theme.css">
<link rel="stylesheet" href="/template/{$_lang.moban}/css/redefine.css">
<link rel="stylesheet" href="/template/{$_lang.moban}/css/redefine1.css">
<script language="JavaScript" type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/js/datetimepicker.js"></script>
</head>

<body >

<!--专题详情-->
{if $t}
<style type="text/css">
        html{
            background-color:#13253B;
        }
		body{
            background: url("./template/default/images/bg.jpg");
            background-position: center;
            background-size: 100% 100%;
            background-color: #13253b;
            background-repeat: no-repeat;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            max-width: 100%;
			min-width: 320px;
            margin: 0 auto;
            padding: 0px 10px;
			overflow-x: hidden;
    		overflow-y: visible;
        }
        .slide{
            width: 100%;
            min-height: 180%;
            position: relative;

        }
        .slide .img{
            overflow: hidden;
            position: absolute;
            box-shadow: 0px 4px 3px rgba(255,255,255,0.05);
            transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
        }
        .slide .img>img{
            width: calc(100% - 0px);
            height: calc(100% - 0px);
        }
        .slide .img1{
            width: 30%;
            height: 50%;
            top: 25%;
            left: 0%;
            z-index: 1;
        }
        .slide .img2{
            width: 40%;
            height: 60%;
            top: 20%;
            left: 10%;
            z-index: 2;
        }
        .slide .img3{
            width: 50%;
            height: 70%;
            top: 15%;
            left: 25%;
            z-index: 3;
        }
        .slide .img4{
            width: 40%;
            height: 60%;
            top: 20%;
            left: 50%;
            z-index: 2;
        }
        .slide .img5{
            width: 30%;
            height: 50%;
            top: 25%;
            left: 70%;
            z-index: 1;
        }
        .slide .blabel{
            position: absolute;
            left: 20px;
            bottom: 15px;
            z-index: 4;
            font-size: 16px;
            font-weight: normal;
            opacity: 0;
            color: #ffffff;
            text-shadow: 0px 2px 15px #000;
            transition: opacity 1.5s ease;
        }
        .slide a{
            position: absolute;
            z-index: 4;
            top: 50%;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
            opacity: 0;
            transition: opacity 1.5s ease;
        }
        .slide a>img{
            width: 80px;
            height: 80px;
        }

        .slide .img3 .blabel,.slide .img3 a{
            opacity: 1;
        }


		.zt-title{
            position: absolute;
			top: 10px;
            left: 0;
			right: 0;
			margin: 0;
            z-index: 111;
            text-align: center;
            font-size: 28px;
            color: #ffffff;
            height: 40px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
        }
		
		.zt-bottom{
			position:absolute;bottom:10px;left:0;right:0;margin:0 auto;color:#fff;font-size:16px;text-align:center;
		}

       /* .slide-bt{
            position: absolute;
            left: 50%;
            bottom: 13%;
            z-index: 10;
        }
        .slide-bt span{
            width: 24px;
            height: 8px;
            background: #c9caca;
            float: left;
            margin: 5px;
            border-radius: 4px;
        }
        .slide .slide-bt .on{
            background: #ffd200;
        }
        */

        button{
            width: 50px;
            margin: 20px;
            display: none;
		}

        @media (max-width: 992px) {
            .zt-title{
                font-size: 18px;
            }
			.zt-bottom{
				font-size: 14px;
			}
        }

        @media (max-width: 500px) {
			.container{
				padding-bottom:50px;
			}
            .slide-5 .img1{
                width: 30%;
                height: 50%;
                top: 25%;
                left: 0%;
                z-index: 1;
            }
            .slide-5 .img2{
                width: 50%;
                height: 70%;
                top: 15%;
                left: -10%;
                z-index: 2;
            }
            .slide-5 .img3{
                width: 80%;
                height: 95%;
                top: 0%;
                left: 10%;
                z-index: 3;
            }
            .slide-5 .img4{
                width: 50%;
                height: 70%;
                top: 15%;
                left: 55%;
                z-index: 2;
            }
            .slide-5 .img5{
                width: 30%;
                height: 50%;
                top: 25%;
                left: 70%;
                z-index: 1;
            }

            .slide .blabel{
                font-size: 12px;
                bottom: 10px;
            }
            .slide a{
                margin-top: -30px;
                margin-left: -30px;
            }
            .slide a>img{
                width: 60px;
                height: 60px;
            }

			.zt-title{
                font-size: 16px;
				top: -30px;
            }
			
			.zt-bottom{
				bottom: -20px;
				font-size: 12px;
			}

        }


    </style>
<div class="container">
    <div id="slide" class="slide slide-5" alt="star">
		<div class="zt-title">{$t.name}</div>
        <!-- 轮播图片数量可自行增减 -->
        {foreach $t.list as $k=>$v}
        <div class="img">
            <label class="blabel">{$v['pname']}</label>
            <a href="/tour/{$v['view_uuid']}" target="_blank"><img src="./template/default/images/play.png"/></a>
            <img src="{$v['img_path']}"/>
        </div>
        {/foreach}
		
		<div class="zt-bottom">
			{$t.bottom}
		</div
    ></div>
    <button class="leftbtn" onClick="left()">上一页</button>
    <button class="rightbtn" onClick="right()">下一页</button>
</div>
<script type="text/javascript">
var autoLb = false;          //autoLb=true为开启自动轮播
var autoLbtime = 1.5;         //autoLbtime为轮播间隔时间（单位秒）
var touch = true;           //touch=true为开启触摸滑动
var slideBt = false;         //slideBt=true为开启滚动按钮


var slideNub;               //轮播图片数量


function zttitle(){
    var sildemt=$('#slide').css('margin-top');
}
//窗口大小改变时改变轮播图宽高

$(window).resize(function(){
    $(".slide").height($(".slide").width()*0.5);

    //slide 垂直居中
    var slideh=$(".slide").height();
    var winh=$(window).height();
    var mt=(winh-slideh)/2+'px';
    $(".slide").css("margin-top",mt);
	//专题标题的margin-top的距离
    var sildemt=parseInt($('#slide').css('margin-top'));
    //$('.zt-title').css('margin-top',sildemt+10+'px');
	//$('.zt-title').css('bottom',slideh+140+'px');
    if($(window).width()<500){
        //$('.zt-title').css('margin-top',sildemt-40+'px');
		//$('.container').css('height',winh+'px');
    }
});

$(function(){
    $(".slide").height($(".slide").width()*0.5);
    slideNub = $(".slide .img").size();             //获取轮播图片数量
    for(i=0;i<slideNub;i++){
        $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
    }


    //slide 垂直居中
    var slideh=$(".slide").height();
    var winh=$(window).height();
    var mt=(winh-slideh)/2+'px';
    $(".slide").css("margin-top",mt);
	
	//专题标题的margin-top的距离
    var sildemt=parseInt($('#slide').css('margin-top'));
    //$('.zt-title').css('margin-top',sildemt+10+'px');
	//$('.zt-title').css('bottom',slideh+140+'px');
    if($(window).width()<500){
        //$('.zt-title').css('margin-top',sildemt-40+'px');
    }


    //根据轮播图片数量设定图片位置对应的class
    if(slideNub==1){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img3");
        }
    }
    if(slideNub==2){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+3));
        }
    }
    if(slideNub==3){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+2));
        }
    }
    if(slideNub>3&&slideNub<6){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+1));
        }
    }
    if(slideNub>=6){
        for(i=0;i<slideNub;i++){
            if(i<5){
               $(".slide .img:eq("+i+")").addClass("img"+(i+1)); 
            }else{
                $(".slide .img:eq("+i+")").addClass("img5"); 
            }
        }
    }


    //根据轮播图片数量设定轮播图按钮数量
    if(slideBt){
        for(i=1;i<=slideNub;i++){
            $(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
        }
        $(".slide-bt").width(slideNub*34);
        $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
    }


    //自动轮播
    if(autoLb){
        setInterval(function(){
        right();
    }, autoLbtime*5000);
    }


    if(touch){
        k_touch();
    }
    slideLi();
    imgClickFy();
	
	
	
	
})


//右滑动
function right(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==0){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//左滑动
function left(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==(slideNub-1)){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//轮播图片左右图片点击翻页
function imgClickFy(){
    $(".slide .img").removeAttr("onclick");
    $(".slide .img2,.slide .img1").attr("onclick","left()");
    $(".slide .img4,.slide .img5").attr("onclick","right()");
}


//修改当前最中间图片对应按钮选中状态
function slideLi(){
    var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
    $(".slide-bt span").removeClass("on");
    $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
}


//轮播按钮点击翻页
function tz(id){
    var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
    if(tzcs>0){
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              right();  
            },1);
        }
    }
    if(tzcs<0){
        tzcs=(-tzcs);
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              left();  
            },1);
        }
    }
    slideLi();
}


//触摸滑动模块
function k_touch() {
    var _start = 0, _end = 0, _content = document.getElementById("slide");
    _content.addEventListener("touchstart", touchStart, false);
    _content.addEventListener("touchmove", touchMove, false);
    _content.addEventListener("touchend", touchEnd, false);
    function touchStart(event) {
        var touch = event.targetTouches[0];
        _start = touch.pageX;
    }
    function touchMove(event) {
        var touch = event.targetTouches[0];
        _end = (_start - touch.pageX);
    }

    function touchEnd(event) {
        if (_end < -100) {
            left();
            _end=0;
        }else if(_end > 100){
            right();
            _end=0;
        }
    }
}

</script>
{else}
<style>
.special_con{
    margin-top: 20px;
    margin-bottom: 20px;
}

.special_list{
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 2px 2px rgba(0,0,0,.03);
}
.special_list>a{
    position: relative;
    display: block;
    overflow: hidden;
}

.special_list>a>.fg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.0);
    z-index: 22;
    transition: background .4s ease;
    text-align: center;
}
.special_list>a>.fg>img{
    width: 80px;
    height: 80px;
    opacity: 0;

}

.special_list>a:hover>.fg{
    background: rgba(0,0,0,.25);
}
.special_list>a:hover>.fg>img{
    opacity: 1;
}
    .special_list>.tem_list{
        width: 100%;
        margin-top: 10px;
        position: relative;
        overflow: hidden;
    }
.special_list>.tem_list>span{
    position: absolute;
    display: inline-block;
    width: 80px;
    height: 25px;
    line-height: 25px;
    background: rgba(201,132,25,.9);
    text-align: center;
    color: #ffffff;
    z-index: 20;
}
    .special_list>.tem_list .item_c{
        width: 100%;
    }
    .special_list>.tem_list>.row{
        margin-left: -5px;
        margin-right: -5px;
    }
.special_list>.tem_list>.row>div{
    width: 20%;
    padding-left: 5px;
    padding-right: 5px;
}

.special_list>h2{
    padding: 0 15px;
    margin-top: 20px;
}
.special_list>h4{
    font-weight: normal;
    padding: 0 15px;
    margin-bottom: 20px;
    color: #999999;
}
    @media (max-width: 768px) {
        .special_list>.tem_list>.row>div{
            width: 20%;
        }
        .special_list>.tem_list>span{
            width: 70px;
            height: 23px;
            line-height: 23px;
            background: rgba(201,132,25,.9);
            text-align: center;
            color: #ffffff;
            z-index: 20;
        }

        .special_list>a>.fg{
            background: rgba(0,0,0,.25);
            transition: none;
        }
        .special_list>a>.fg>img{
            width: 60px;
            height: 60px;
            opacity: 1;

        }

        .special_list>a:hover>.fg{
            background: rgba(0,0,0,.25);
        }
        .special_list>a:hover>.fg>img{
            opacity: 1;
        }
    }
</style>
<!--专题列表-->
{include file="{$_lang.moban}/library/nav.lbi"}
<div class="container special_con">
    {foreach $res as $v}
    <div class="row">
        <div class="col-md-6">
            <div class="special_list">
                <a target="_blank" href="/topic?t={$v.id}">
                    <div class="fg">
                        <img src="./template/default/images/play.png"/>
                    </div>
                    <img src="{$v['works'][0]['img_path']}">
                </a>
                <div class="tem_list">
                    <span>其他页</span>
                    <div class="row">
                        {for $i=1; $i<count($v['works']); $i++}
                        <div class="col-md-3 col-xs-3">
                            <div class="item_c">
                                <img src="{$v['works'][$i]['img_path']}" height="140px" width="110px"/>
                            </div>
                        </div>
                        {/for}
                    </div>
                </div>
                <h2>{$v.name}</h2>
                <h4>{$v.bottom}</h4>
            </div>
        </div>
    </div>
    {/foreach}
</div>
<script>
    $(function(){
        var sl=$('.special_list').width();
        $('.special_list>a').css({
            width:sl+'px',height:sl*0.5+'px'
        });
        $('.special_list>a>img').css('width',sl+'px');
        $('.special_list>a>.fg').css('line-height',sl*0.5+'px');


        var ww3=$('.item_c').width();
        $('.item_c img,.item_c').css({
            width:ww3+'px',height:ww3*0.8+'px'
        });
    });
</script>
<!--<div class="container" style="margin-top:20px;">
	{foreach $res as $v}
		<a target="_blank" href="/topic?t={$v.id}">
			<img src="{$v['works'][0]['img_path']}" width="500px" height="300px" style="float:left">
		</a>
		<div style="width:600px;float:left;margin-left:10px;">
			<h3>{$v.name}</h3>
			<div>{$v.brief}</div>
			<div style="margin-top:10px">{$v.bottom}</div>
			<div>
				{for $i=1; $i<count($v['works']); $i++}
					<img src="{$v['works'][$i]['img_path']}" height="140px" width="110px"/>
				{/for}
			</div>
		</div>
		<div style="clear:both;height:20px;"></div>
	{/foreach}
</div>-->
{include file="{$_lang.moban}/library/footer.lbi"}
{/if}
</body>
</html>